const http = require('http');
const server = http.createServer();
const mongoose = require('mongoose');
const url = require('url')
const mime = require('mime')
const querystring = require('querystring')

require('./model/index.js')
const User = require('./model/user.js')
    // 创建用户集合
const serveStatic = require('serve-static')
const path = require('path')
const serve = serveStatic('public')

server.listen(8000)
server.on('request', async(req, res) => {

    const method = req.method;
    serve(req, res, () => {
        console.log(1)
    })
    const { pathname, query } = url.parse(req.url, true)
    let type = mime.getType(pathname)
    let hobby = ['足球', '篮球', '橄榄球 ', '敲代码 ', '抽烟', '喝酒 ', '烫头']
    if (method == 'GET') {
        if (pathname == '/list') {
            // 查询用户信息，为了让能用户信息先拿到，再执行后面的代码，需要用异步函数。
            let users = await User.find()
            let list = `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>用户列表</title>
                <link rel="stylesheet" href="css/bootstrap.min.css">
                <script src="js/bootstrap.min.js"></script>
                <style>
                    .container {
                        width: 1200px;
                        margin: 0 auto;
                    }
                    
                    .margin-top {
                        margin-top: 10px;
                    }
                    
                    form {
                        width: 100%;
                    }
                    
                    th,
                    td {
                        border: 1px solid #ccc;
                    }
                    
                    td:nth-child(1) {
                        width: 200px;
                    }
                    
                    td:nth-child(2) {
                        width: 150px;
                    }
                    
                    td:nth-child(3) {
                        width: 250px;
                    }
                    
                    td:nth-child(4) {
                        width: 300px;
                    }
                    
                    td:nth-child(5) {
                        width: 100px;
                    }
                </style>
            </head>
            
            <body>
                <div class="container">
                    <a href="/add" class="btn btn-primary margin-top" type="button">
                  添加用户
                </a>
                    <form action="localhost:8090">
                        <table>
                            <tr>
                                <th>用户名</th>
                                <th>年龄</th>
                                <th>爱好</th>
                                <th>邮箱</th>
                                <th>操作</th>
                            </tr>
                `;
            // 对数据进行循环操作
            users.forEach((item) => {
                list += `<tr>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>`
                item.hobbies.forEach(item => {
                    list += `<span>${item}</span>`
                })
                list += `
                    </td>
                    <td>${item.email}</td>
                    <td><a href="delete?id=${item._id}" >删除</a><a href="modify?id=${item._id}" >修改</a></td>
                </tr>`
            })
            list += `   </table>
                    </form>
                </div>
                <script>
                    var button = document.querySelector('button')
            
                    button.onclick = function() {
                        console.log(11)
                    }
                </script>
            </body>
            </html>`
            res.end(list)
        } else if (pathname == '/add') {
            let add = `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>添加用户t</title>
                <link rel="stylesheet" href="css/bootstrap.min.css">
                <style>
                    label {
                        margin-top: 10px;
                        display: block;
                        font-size: 16px;
                    }
                    
                    input {
                        outline: none;
                    }
                    
                    button {
                        display: block !important;
                        margin-top: 10px;
                    }
                </style>
            </head>
            <div class="container">
                <h3>添加用户</h3>
                <form method="post" action="/add" >
                
                    <label for="username">用户名</label>
                    <input type="text" value='请填写用户名' name='name'>
                    <label for="password">密码</label>
                    <input type="password" value='请输入密码' name='password'>
                    <label for="age">年龄</label>
                    <input type="text" value='请填写年龄' name='age'>
                    <label for="email">邮箱</label>
                    <input type="text" value='请填写邮箱' name='email'>
                    <label>请选择爱好</label>
                    <input type="checkbox" name="hobbies" value="足球">足球
                    <input type="checkbox" name="hobbies" value="篮球">篮球
                    <input type="checkbox" name="hobbies" value="橄榄球">橄榄球
                    <input type="checkbox" name="hobbies" value="敲代码">敲代码
                    <input type="checkbox" name="hobbies" value="抽烟">抽烟
                    <input type="checkbox" name="hobbies" value="喝酒">喝酒
                    <input type="checkbox" name="hobbies" value="烫头">烫头
                    <input type="submit" class="btn btn-primary margin-top" value="添加用户">
                </form>
                <script>
                    var checkboxs = document.querySelectorAll('input')
                    for (var i = 0; i < checkboxs.length; i++) {
                        if (checkboxs[i].type != 'checkbox') {
                            checkboxs[i].style.width = '100%';
                        }
            
                    }
                </script>
            </div>
            
            <body>
            
            </body>
            
            </html>`
            res.end(add)
        } else if (pathname == '/modify') {
            let user = await User.findOne({ _id: query.id })
            let modify = `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>修改用户t</title>
                <link rel="stylesheet" href="css/bootstrap.min.css">
                <style>
                    label {
                        margin-top: 10px;
                        display: block;
                        font-size: 16px;
                    }
                    
                    input {
                        outline: none;
                    }
                    
                    button {
                        display: block !important;
                        margin-top: 10px;
                    }
                </style>
            </head>
            <div class="container">
                <h3>修改用户</h3>
                <form method="post" action="/modify?id=${user._id}" >
                    <label for="username">用户名</label>
                    <input type="text" value='${user.name}' name='name'>
                    <label for="password">密码</label>
                    <input type="password" value='${user.password}' name='password'>
                    <label for="age">年龄</label>
                    <input type="text" value='${user.age}' name='age'>
                    <label for="email">邮箱</label>
                    <input type="text" value='${user.email}' name='email'>
                    <label>请选择爱好</label>`
            hobby.forEach(item => {
                console.log(user.hobbies)
                let ishobby = user.hobbies.includes(item)

                if (ishobby) {
                    modify += `<input type = "checkbox"  name = "hobbies" value = "${item}" checked=checked > ${item} `
                } else {
                    modify += `<input type = "checkbox"  name = "hobbies" value = "${item}"> ${item} `
                }
            })
            modify += `    
            <div>  
            <input type="submit" class="btn btn-primary margin-top" value="修改用户">
            </div>
            </form>
            <script>
                var checkboxs = document.querySelectorAll('input')
                for (var i = 0; i < checkboxs.length; i++) {
                    if (checkboxs[i].type != 'checkbox') {
                        checkboxs[i].style.width = '100%';
                    }
                }
            </script>
        </div>
        
        <body>
        </body>
        </html>`
            res.end(modify)

        } else if (pathname == '/delete') {
            console.log(query.id)
            await User.findOneAndDelete({ _id: query.id })
            res.writeHead(301, {
                Location: '/list'
            })
            res.end()
        }
    } else if (method == 'POST') {
        if (pathname == '/add') {
            let formDatas = ''
            req.on('data', (param) => {
                formDatas = formDatas + param
            })
            req.on('end', async() => {
                let user = querystring.parse(formDatas)
                console.log(user)
                await User.create(user)
                    // 301代表重定向
                res.writeHead(301, {
                    Location: '/list'
                })
                res.end()
            })
        } else if (pathname == '/modify') {
            let formDatas = ''
            req.on('data', (param) => {
                formDatas = formDatas + param
            })

            req.on('end', async() => {
                let user = querystring.parse(formDatas)
                await User.updateOne({ _id: query.id }, user)
                    // 301代表重定向
                res.writeHead(301, {
                    Location: '/list'
                })
                res.end()
            })
        }

    }
    res.writeHead(200, { 'Content-Type': type })
})